<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>商品详情</title>
    <link rel="stylesheet" href="./dmo/css/goodsdetails.css">
    <link rel="stylesheet" href="./dmo/dist/css/bootstrap.css">
    <link rel="stylesheet" href="./css/style.css">
    <link rel="stylesheet" href="./dmo/css/base.css">
    <script src="./dmo/js/jquery-3.7.0.js"></script>
    <script src="./dmo/js/goodsdetail.js"></script>
    <script src="./dmo/js/start.js"></script>
</head>
<body>
<style>
    .row img {
        width: 100px;
        height: 100px;
        float: left;
    }

    .caption {
        height: 150px;
    }

    .p-cate-tags {
        margin-top: 130px;
    }
</style>
<h1 class="goodsname">商品名称</h1>
<div class="container">
    <div class="col-sm-3">
        <div class="img-self-wapper center">
            <img id="imgurlself" src="" height="200px" width="200px" alt="">
        </div>

        <div class="p-cate-tags">
            <p style="font-size: 20px;font-weight: bold">商品类别:</p>
            <p id="goosdcategoryies"></p>
            <p style="font-size: 20px;font-weight: bold">商品标签:</p>
            <p id="goosdtags"></p>
        </div>
        <!-- 评分 五星 -->
        <style>
            .thumbnail{
                position: relative;
            }
            .img_text_center{
                position: absolute;
                top: 50%;
                left: 7%;
                transform: translate(-50%,-50%);
            }
            .caption{
                margin-left: 130px;
            }
            #star_div {
                display: inline-block;
                font-size: 0px;
            }

            span {
                display: inline-block;
                width: 30px;
                height: 30px;
                background-size: 30px 30px;
            }

            .full-star {
                background-image: url('./dmo/img/一个星星.png');
            }

            .empty-star {
                background-image: url('./dmo/img/空星.png');
            }

            .half-star {
                background-image: url('./dmo/img/半个星星.png');
            }
        </style>
        <br>
        <div style="font-size: 20px;font-weight: bold" class="center">用户评分</div>
        <div id="star_div" style="margin: 50px 50px;">
            <span id="0" class="full-star"></span>
            <span id="1" class="full-star"></span>
            <span id="2" class="full-star"></span>
            <span id="3" class="full-star"></span>
            <span id="4" class="full-star"></span>
        </div>
        <div class="center">
            <button id="earn-choosedVal">确认评分</button>
            <!-- <a id="earn-choosedVal" class="btn btn-default" href="#" role="button">确认评分</a> -->
        </div>
    </div>
    <div class="col-sm-9">
        <div class="row">

        </div>
        <a class="btn btn-default" href="./enterbangdan.html" role="button">返回上一页</a>
    </div>

</div>
</body>
<script type="text/javascript">
    let spans = document.getElementsByTagName("span");
    let choosedVal = 10; // 评分分数
    let starWidth = 30; // 星星宽度
    let _left = document.getElementById('star_div').getBoundingClientRect().left;
    let _top = document.getElementById('star_div').getBoundingClientRect().top;

    οnlοad = function () {
        document.getElementById("star_div").onmousemove = function (e) {
            if (e.target.tagName === 'SPAN') {
                let index = parseInt(e.target.id);
                let imgDynamicWidth = e.pageX - _left - index * starWidth;
                if (imgDynamicWidth < starWidth / 2) {
                    spans[index].className = 'half-star'
                } else {
                    spans[index].className = 'full-star'
                }
                for (let j = index + 1; j < 5; j++) {
                    spans[j].className = 'empty-star'
                }
                for (let k = 0; k < index; k++) {
                    spans[k].className = 'full-star'
                }
            }
        };

        document.getElementById("star_div").onclick = function (e) {
            if (e.target.tagName === 'SPAN') {
                let index = parseInt(e.target.id);
                choosedVal = index * 2;
                let imgDynamicWidth = e.pageX - _left - index * starWidth;
                if (imgDynamicWidth < starWidth / 2) {
                    choosedVal += 1
                } else {
                    choosedVal += 2
                }
            }
        };

        //载入鼠标离开div事件
        document.getElementById("star_div").onmouseleave = function () {
            let index = parseInt(choosedVal / 2);

            for (let j = index; j < 5; j++) {
                spans[j].className = 'empty-star'
            }
            for (let k = 0; k < index; k++) {
                spans[k].className = 'full-star'
            }
            if (index * 2 !== choosedVal) {
                spans[index].className = 'half-star'
            }
        };

        // 获取星星的位置 评分
        document.getElementById("star_div").onclick = function (e) {
            if (e.target.tagName === 'SPAN') {
                let index = parseInt(e.target.id);
                let imgDynamicWidth = e.pageX - _left - index * starWidth;
                if (imgDynamicWidth < starWidth / 2) {
                    choosedVal = index * 2 + 1;
                } else {
                    choosedVal = index * 2 + 2;
                }

                localStorage.setItem("choosedVal", choosedVal);
            }
        };
    }();
</script>
</html>

